<template>
  <div class="wrapper fixed">
    <ait-header></ait-header>
    <side-menu></side-menu>
    <div class="content-wrapper" :class="{ slideCollapse: collapsed}">
      <div class="content-scrollbar">
        <section class="content">
          <div style="min-height: calc(100vh - 200px); ">
            <router-view></router-view>
          </div>
        </section>
      </div>
      <ait-footer></ait-footer>
    </div>
  </div>
</template>

<script>
  import AitHeader from "./Header";
  import SideMenu from  "./SideMenu";
  import AitFooter from  "./Footer";
  import {mapState} from "vuex"

  export default {
    name: "Frame",
    components: {
      AitHeader,
      SideMenu,
      AitFooter
    },
    data() {
      return {
      }
    },
    computed: {
      ...mapState({
        collapsed: 'collapsed',
      }),
    },
  }
</script>

<style scoped lang="less">
  blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul {
    margin: 0;
    padding: 0;
  }

  *,:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }


  .content-wrapper {
    -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    margin-left: 180px;
    padding-top: 50px;
  }

  .content-scrollbar{
    height: calc(100vh - 50px);
    padding-bottom: 30px;
  }

  .content-wrapper .content {
    padding: 1.25rem;
  }

  .content-wrapper.slideCollapse{
    margin-left: 44px;
  }

  .content-wrapper.mobileSide{
    margin-left: 0;
  }
</style>
